<template>
  <div class="client_content">
    <el-form :inline="true" @submit.native.prevent="getClientPage" class="form_search">
      <div style="float: left">
        <el-button class="button_add" type="primary" @click="handleAdd">添加客户</el-button>
      </div>
      <div style="float: right">
      <el-form-item>
        <el-input v-model="keyword" placeholder="请输入客户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="button_se" type="primary" native-type="submit">搜索</el-button>
        <el-button class="button_se" type="text" @click="reset">重置</el-button>
      </el-form-item>
      </div>
    </el-form>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">
      <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <div class="contract_header">
          <p>基础信息</p>
          <hr>
        </div>
        <el-form-item label="客户名称" prop="clientName">
          <el-input v-model="form.clientName" placeholder="请输入客户名称"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="客户级别" prop="clientLevel">
              <el-select v-model="form.clientLevel" placeholder="请选择">
                <el-option
                  v-for="(item,index) in levels"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业" prop="industry">
              <el-select v-model="form.industry" placeholder="请选择">
                <el-option
                  v-for="(item,index) in industries"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="postalCode">
              <el-input v-model="form.postalCode" placeholder="请输入邮政编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="所在区域" prop="homeRegion">
          <el-cascader
            size="large"
            :options="regions"
            v-model="selectedRegions"
            @change="handleCityChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入所在地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" >确认</el-button>
      </span>
    </el-dialog>
    <el-table
      :data="clientList"
      style="width: 100%;min-height: 500px" >
      <el-table-column
        prop="clientName"
        label="客户名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="clientLevel"
        label="客户级别"
        width="180">
      </el-table-column>
      <el-table-column
        prop="industry"
        label="行业">
      </el-table-column>
      <el-table-column
        prop="postalCode"
        label="邮政编码">
      </el-table-column>
      <el-table-column
        prop="homeProvince"
        label="所在省">
      </el-table-column>
      <el-table-column
        prop="homeCity"
        label="所在市">
      </el-table-column>
      <el-table-column
        prop="homePrefecture"
        label="所在县">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="homeRegion"-->
<!--        label="所在区域">-->
<!--      </el-table-column>-->
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.id ">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30, 40]"
      :page-size="pageSize"
      :total="total"
      layout="sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import { list, pageClient, deleteClient, updateClient, getOne } from '../../../api/contract/client'
import { regionData, codeToText } from 'element-china-area-data'

export default {
  name: 'Client.vue',
  data () {
    return {
      // 客户列表
      clientList: [],
      title: '',
      levels: ['1', '2', '3', '4', '5'],
      industries: ['行业1', '行业2', '行业3', '行业4', '行业5', '行业6'],
      regions: regionData,
      selectedRegions: [],
      addtions: {},
      currentPage: 1,
      pageSize: 5,
      total: 0,
      keyword: '',
      form: {
        // 客户名称
        clientName: '',
        // 客户级别
        clientLevel: '',
        // 行业
        industry: '',
        // 邮政编码
        postalCode: '',
        // 所在省
        homeProvince: '',
        // 所在市
        homeCity: '',
        // 所在县
        homePrefecture: '',
        // 地址
        address: ''
      },
      rules: {
        clientName: [
          { required: true, message: '客户姓名不能为空', trigger: 'blur' }
        ],
        clientLevel: [
          { required: true, message: '客户级别不能为空', trigger: 'blur' }
        ]
      },
      dialogVisible: false
    }
  },
  created () {
    this.getClientPage()
  },
  computed: {
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.restForm()
        })
        .catch(_ => {
        })
    },
    getClientList () {
      list().then(response => {
        console.log(response.data)
        this.clientList = response.data
      })
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getClientPage()
    },
    handleCurrentChange (page) {
      this.currentPage = page
      this.getClientPage()
    },
    // 在此方法中调用后端接口获取分页数据并刷新页面
    getClientPage () {
      // 发起请求并将currentPage和pageSize参数传递给后端接口
      pageClient({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      }).then(response => {
        this.clientList = response.data.records
        this.total = response.data.total
      })
    },
    // 搜索框重置
    reset () {
      this.keyword = ''
      this.getClientPage()
    },
    handleCityChange (value) {
      // 我们选择地址后，selectedRegions 会保存对应的区域码，例如北京的区域码为'110000'
      // 我们要取出区域码对应的汉字，就需要用CodeToText(区域码)进行输出
      this.addtions.selectedRegions = value
      let name = ''
      // eslint-disable-next-line no-return-assign
      this.selectedRegions.map(item => name += codeToText[item] + '/')
      this.addtions.names = name
      console.log(this.addtions)
      const addrList = this.addtions.names.split('/')
      this.form.homeProvince = addrList[0]
      this.form.homeCity = addrList[1]
      this.form.homePrefecture = addrList[2]
    },
    // 表单数据清空
    restForm () {
      this.form = {
        // 客户名称
        clientName: '',
        // 客户级别
        clientLevel: '',
        // 行业
        industry: '',
        // 邮政编码
        postalCode: '',
        // 地址
        address: ''
      }
    },
    handleAdd () {
      this.title = '添加客户'
      this.dialogVisible = true
    },
    handleDelete (row) {
      this.$confirm('是否删除该客户的数据？').then(function () {
        return deleteClient(row.id)
      }).then(() => {
        this.$message.success('删除成功')
        this.getClientPage()
      }).catch(() => {})
    },
    handleUpdate (row) {
      getOne(row.id).then(response => {
        this.title = '修改客户信息'
        this.form = response.data
        this.dialogVisible = true
      })
    },
    cancel () {
      this.restForm()
      this.dialogVisible = false
    },
    submitForm (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // 校验合同类型数据
          if (this.form.clientName == null || this.form.clientLevel == null) {
            console.log(this.form.clientName)
            this.$message.error('请按要求填写数据！')
            return false
          } else {
            updateClient(this.form).then(response => {
              console.log(this.form)
              this.$message.success('操作成功')
              this.dialogVisible = false
              this.getClientPage()
              this.restForm()
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .contract_header {
    font-size: 16px;
    font-weight: bolder;
    padding-top: 5px;
    padding-bottom: 10px;
  }

  .contract_header hr {
    border-style: solid;
    border-width: 2px;
    color: #d3d3d3;
    width: 100%;
    margin-top: 10px;
  }

  .client_content {
    padding-top: 10px;
  }

</style>
